<template>
	<div>
		<el-button type="primary" @click="showModel=true">新增优惠券</el-button>
		<div class="uiwu-table">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="id" label="ID" align="center" />
				<el-table-column prop="name" label="优惠券名称" align="center" />
				<el-table-column prop="typeText" label="优惠券类型" align="center" />
				<el-table-column prop="conditionText" label="使用条件" align="center" />
				<el-table-column prop="isRelatedGoods" label="是否关联商品" align="center" />
				<el-table-column prop="value" label="优惠券金额" align="center" />
				<el-table-column prop="minAmount" label="最低消费金额" align="center" />
				<el-table-column prop="maxAmount" label="最高优惠金额" align="center" />
				<el-table-column prop="startDate" label="开始时间" align="center" />
				<el-table-column prop="endDate" label="结束时间" align="center" />
				<el-table-column prop="isExpiredText" label="状态" align="center" />
				<el-table-column prop="description" label="说明" width="180" align="center" />
				<el-table-column align="center" width="180" label="操作">
					<template #default>
						<el-button type="primary" size="small">编辑</el-button>
						<el-button type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<coupons-model v-model="showModel"></coupons-model>
	</div>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getCouponListApi } from '@/api/coupon';
	import CouponsModel from './components/CouponsModel.vue';
	const tableData = ref([])
	const currentPage = ref(1)
	const total = ref(0)
	const showModel = ref(false)
	const getCouponList = async () => {
		const res = await getCouponListApi({
			page:currentPage.value
		});
		tableData.value = res.data;
		total.value = res.total;
		console.log(res);
	};
	onMounted(()=>{
		getCouponList();
	})
</script>

<style>
	.uiwu-table{
		margin-top: 16px;
	}
</style>